<template>
    <ul :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
        <li v-for="(item, index) in menuList" :key="index" @click="handleClick && handleClick(event, item, index)">
            <component v-if="item.icon" :is="item.icon" style="width: 1em; height: 1em;" /> {{ item.name }}
        </li>
    </ul>
</template>
<script setup>
const props = defineProps({
    menuList: {
        type: Array,
        default: [],
    },
    left: {
        type: Number,
        default: 0,
    },
    top: {
        type: Number,
        default: 0,
    },
    // 右键事件
    event: {
        type: Object
    },
    // 点击事件
    handleClick: {
        type: Function
    }
})

</script>

<style lang="scss" scoped>
.contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;

        &:hover {
            background: #eee;
        }
    }
}
</style>